<template>
	<div class="app-container">
		<div class="wx-user-box" style="padding-top: 0;">
			<div class="wx-user-title">代理商管理</div>
			<div class="search-box">
				<!-- 查询 -->
				<el-form :inline="true" :model="formInline" class="demo-form-inline" @submit.native.prevent>
					<el-form-item label="代理商名称">
						<el-select v-model="formInline.agent_id" filterable placeholder="请选择" clearable
							@change="search">
							<el-option :label="item.agent_name" :value="item.agent_id" v-for="(item, index) in agentList"
								:key="index">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="关键字">
						<el-input @change="search" clearable v-model="formInline.param" placeholder="联系人、联系电话">
						</el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="search" icon="el-icon-search">查询</el-button>
						<el-button type="success" @click="openAdd()">添加代理商</el-button>
					</el-form-item>
				</el-form>

				<el-table :data="list" style="width: 100%;">
					<el-table-column label="代理商名称" prop="agent_name"></el-table-column>
					<el-table-column label="联系人" prop="link_man"></el-table-column>
					<el-table-column label="联系电话" prop="link_phone"></el-table-column>
					<el-table-column label="启用设备数" prop="yesEnable"></el-table-column>
					<el-table-column label="禁用设备数" prop="noEnable"></el-table-column>
					<el-table-column label="设备总数" prop="totalCount"></el-table-column>
					<el-table-column label="创建时间" prop="create_time"></el-table-column>
					<el-table-column label="操作" min-width="100px">
						<template slot-scope="scope">
							<el-button size="mini" @click="setItem(scope.row)">编辑</el-button>
							<el-button size="mini" type="danger" @click="del(scope.row.agent_id)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>

				<!-- 分页 -->
				<div class="page-block" style="margin-top: 20px;">
					<el-pagination background :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize"
						layout="total, sizes, prev, pager, next, jumper" :total="totalRow" :pager-count="pageCount"
						@size-change="handleSizeChange" @current-change="handleCurrentChange" />
				</div>

			</div>
		</div>

		<el-dialog :title="form.agent_id ? '编辑代理商':'添加代理商'" :visible.sync="dialogVisible" width="480px" center
			@close="reset('form')">
			<el-form ref="form" :model="form" :rules="rules" label-width="100px">
				<el-form-item label="代理商名称" prop="agent_name">
					<el-input style="width:280px;" clearable v-model="form.agent_name" placeholder="请输入代理商名称">
					</el-input>
				</el-form-item>
				<el-form-item label="联系人" prop="link_man">
					<el-input style="width:280px;" clearable v-model="form.link_man" placeholder="请输入联系人姓名"></el-input>
				</el-form-item>
				<el-form-item label="联系电话" prop="link_phone">
					<el-input style="width:280px;" clearable maxlength="11" v-model="form.link_phone"
						placeholder="请输入联系电话">
					</el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="reset('form')">取 消</el-button>
				<el-button type="primary" @click="saveOrUpdate('form')">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>
<script>
	import Api from '@/api/pages/entrance-guard/index.js';
	import { validPhone } from '@/utils/validate.js';
	export default {
		name: 'agent-list',
		components: {},
		data() {
			return {
				dialogVisible: false,
				pageSize: 10, // 每页条数
				pageCount: 7, //
				pageSizes: [10, 20, 30, 50], // 个数选择器
				page: 1,
				size: 10,
				currentPage: 1,
				totalRow: 0,
				formInline: {
					param: '',
					agent_id:''
				},
				list: [],
				form: {},
				rules: {
					agent_name: [{
						required: true,
						message: '请输入代理商名称',
						trigger: 'change'
					}],
					link_man: [{
						required: true,
						message: '请输入联系人姓名',
						trigger: 'change'
					}],
					link_phone: [{
						required: true,
						message: '请输入联系电话',
						trigger: 'change'
					}],
				},
				agentList:[]
			};
		},
		mounted() {
			this.getData();
			this.getList();
		},
		methods: {
			// 获取代理商
			getList(){
				Api.getAllAgent({},false).then(res=>{
					if(res.state){
						this.agentList = res.data;
					}
				})
			},
			
			// 查询
			search() {
				this.page = 1;
				this.getData();
			},

			handleSizeChange(val) {
				this.size = val;
				this.page = 1;
				this.getData();
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getData();
			},

			// 列表
			getData() {
				let data = {
					pageNumber: this.page,
					pageSize: this.size,
					param: this.formInline.param,
					agent_id: this.formInline.agent_id
				};

				Api.agentQuery(data).then(res => {
					if (res.state) {
						this.list = res.data.list;
						this.totalRow = res.data.totalRow;
					} else {
						this.$message.error(res.msg);
					}
				});
			},

			// 初始化数据
			initData() {
				this.form = {
					agent_id: '',
					agent_name: '',
					link_man: '',
					link_phone: ''
				};
			},

			// 重置
			reset(formName) {
				this.initData();
				this.$refs[formName].resetFields();
				this.dialogVisible = false;
			},

			// 打开弹窗
			openAdd() {
				this.initData();
				this.dialogVisible = true;
			},

			// 编辑
			setItem(item) {
				this.form = {
					agent_id: item.agent_id,
					agent_name: item.agent_name,
					link_man: item.link_man,
					link_phone: item.link_phone
				}
				this.dialogVisible = true;
			},

			// 添加、编辑操作
			saveOrUpdate(formName, type) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						let params = JSON.stringify(this.form);
						params = JSON.parse(params);
						let datas = {};
						for (let item in params) {
							datas['accessAgent.' + item] = params[item];
						}
						if(!validPhone(this.form.link_phone)){
							this.$message.error("手机格式不正确");
							return;
						}
						
						if (this.form.agent_id) {
							this.Update(datas)
						} else {
							this.save(datas)
						}
						// console.log(datas)
					}
				});
			},
			// 添加
			save(datas) {
				Api.agentSave(datas).then((res) => {
					this.callback(res,1);
				});
			},
			// 更新
			Update(datas) {
				Api.agentUpdate(datas).then((res) => {
					this.callback(res,2);
				});
			},
			// 响应处理
			callback(res,type) {
				if (res.state) {
					this.$message({
						message: res.msg,
						type: "success"
					});
					if(type==1){
						this.getList();
					}
					this.getData();
					this.reset('form');
				} else {
					this.$message.error(res.msg);
				}
			},

			// 删除
			del(id) {
				this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					Api.agentDel({
						agent_id: id
					}).then(res => {
						if (res.state) {
							this.$message({
								message: res.msg,
								type: "success"
							});
							this.getList();
							this.getData();
						} else {
							this.$message.error(res.msg);
						}
					});
				}).catch(() => {});
			},
			
			

		}
	};
</script>
<style scoped>
	.page-block {
		display: flex;
		justify-content: center;
	}
</style>
